<template>
    <div>
        <div class="content">
            <h3 style="text-align:center">{{startTime}}至{{endTime}}{{'同比'}}增长率统计表</h3>
            <ul class="tb-ul">
                <li>作业港口：{{portName.join(',')}}</li>
                <li style="padding-left:50px;">统计月度：{{startTime}}至{{endTime}}</li>
                <li style="float:right;">单位：TEU</li>
            </ul>

            <table class="all-tab">
                <tr>
                    <td>类别</td>
                    <td>类型</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.portName}}</td>
                </tr>
                <tr>
                    <td rowspan="3">装箱</td>
                    <td>港内装箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.total}}</td>
                </tr>
                <tr>
                    <td>厂外装箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.CZtotal}}</td>
                </tr>
                <tr class="td-bg">
                    <td>小计</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.CZXtotal|filterZero}}</td>
                </tr>
                <tr class="td-bg2">
                    <td rowspan="3">拆箱</td>
                    <td>港内掏箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.CXgn}}</td>
                </tr>
                <tr class="td-bg2">
                    <td>整箱提运</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.CXzx}}</td>
                </tr>
                <tr class="td-bg">
                    <td>小计</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.CXtotal|filterZero}}</td>
                </tr>
                <tr>
                    <td rowspan="6">进口</td>
                    <td>艘次</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.ivoyage}}</td>
                </tr>
                <tr>
                    <td>重箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.iheavyTeu}}</td>
                </tr>
                <tr>
                    <td>空箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.iemptyTeu}}</td>
                </tr>
                <tr>
                    <td>水转水</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.iwaterTeu}}</td>
                </tr>
                <tr>
                    <td>非水转水</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.inoWaterTeu}}</td>
                </tr>
                <tr class="td-bg">
                    <td>理箱量</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.iTotal|filterZero}}</td>
                </tr>
                <tr class="td-bg2">
                    <td rowspan="6">出口</td>
                    <td>艘次</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.ovoyage}}</td>
                </tr>
                <tr class="td-bg2">
                    <td>重箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.oheavyTeu}}</td>
                </tr>
                <tr class="td-bg2">
                    <td>空箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.oemptyTeu}}</td>
                </tr>
                <tr class="td-bg2">
                    <td>水转水</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.owaterTeu}}</td>
                </tr>
                <tr class="td-bg2">
                    <td>非水转水</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.onoWaterTeu}}</td>
                </tr>
                <tr class="td-bg">
                    <td>理箱量</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.oTotal|filterZero}}</td>
                </tr>
                <tr>
                    <td rowspan="3">特殊作业</td>
                    <td>熏蒸</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.xz}}</td>
                </tr>
                <tr>
                    <td>二转</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.ez}}</td>
                </tr>
                <tr class="td-bg">
                    <td>理箱量</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.xzTotal|filterZero}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="2">总艘次</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.totalV|filterZero}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="2">理重箱量</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.totalH|filterZero}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="2">理空箱量</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.totalE|filterZero}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="2">总理箱量</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.totalAll|filterZero}}</td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
    import {
        getMonthTabRepZXTB,
        getMonthTabRepCXTB,
        getMonthTabRepIOTB,
        getMonthTabRepSPTB
    } from "@/api/shipPlan/shipPlan";
    export default {
        data() {
            return {
                tabelDataTB: [],
                startTime: '',
                endTime: '',
                condition: {},
                portName: []
            }
        },
        mounted() {
            this.loadData3()
        },
        methods: {
            toNumberR(x) {
                if (x === '-') {
                    return 0
                } else {
                    return Number(x)
                }
            },
            loadData3() {
                this.condition = JSON.parse(window.localStorage.MonthReportCondition)
                this.portName = JSON.parse(window.localStorage.MonthReportPortName)
                this.startTime = this.condition.search_GTE_dateTime
                this.endTime = this.condition.search_LTE_dateTime
                let params = JSON.parse(JSON.stringify(this.condition))
                params.search_IN_portCode = params.search_IN_portCode.join(',')
                getMonthTabRepZXTB(params).then(res => {
                    this.tabelDataTB = [{
                        portName: '同期'
                    }, {
                        portName: '当期'
                    }, {
                        portName: '同比增长率(%)'
                    }]
                    for (let el of res.data.aaData) {
                        if (el.planType === '港内装箱') {
                            this.tabelDataTB[0].total = el.samePeriod
                            this.tabelDataTB[1].total = el.currentPeriod
                            this.tabelDataTB[2].total = this.toNumberR(el.sameRatio)
                        } else {
                            this.tabelDataTB[0].CZtotal = el.samePeriod
                            this.tabelDataTB[1].CZtotal = el.currentPeriod
                            this.tabelDataTB[2].CZtotal = this.toNumberR(el.sameRatio)
                        }
                    }
                    this.tabelDataTB.forEach(element => {
                        element.CZXtotal = element.total + element.CZtotal
                        element.CZXtotal = element.CZXtotal.toFixed(2)
                    });
                    this.tabelDataTB[2].CZXtotal = this.tabelDataTB[0].CZXtotal==0||this.tabelDataTB[0].CZXtotal=='-'?0:((this.tabelDataTB[1].CZXtotal - this.tabelDataTB[0].CZXtotal)/ this.tabelDataTB[0].CZXtotal) * 100
                    this.tabelDataTB[2].CZXtotal = this.tabelDataTB[2].CZXtotal.toFixed(2)
                    getMonthTabRepCXTB(params).then(res => {
                        for (let el of res.data.aaData) {
                            if (el.planType === '港内掏箱') {
                                this.tabelDataTB[0].CXgn = el.samePeriod
                                this.tabelDataTB[1].CXgn = el.currentPeriod
                                this.tabelDataTB[2].CXgn = this.toNumberR(el.sameRatio)
                            } else {
                                this.tabelDataTB[0].CXzx = el.samePeriod
                                this.tabelDataTB[1].CXzx = el.currentPeriod
                                this.tabelDataTB[2].CXzx = this.toNumberR(el.sameRatio)
                            }
                        }
                        this.tabelDataTB.forEach(element => {
                            element.CXtotal = element.CXgn + element.CXzx
                            element.CXtotal = element.CXtotal.toFixed(2)
                        });
                        this.tabelDataTB[2].CXtotal = this.tabelDataTB[0].CXtotal==0||this.tabelDataTB[0].CXtotal=='-'?0:((this.tabelDataTB[1].CXtotal - this.tabelDataTB[0].CXtotal)/ this.tabelDataTB[0].CXtotal) * 100
                        this.tabelDataTB[2].CXtotal = this.tabelDataTB[2].CXtotal.toFixed(2)
                        getMonthTabRepIOTB(params).then(res => {
                            for (let el of res.data.Import) {
                                if (el.planType === '艘次') {
                                    this.tabelDataTB[0].ivoyage = el.samePeriod
                                    this.tabelDataTB[1].ivoyage = el.currentPeriod
                                    this.tabelDataTB[2].ivoyage = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '重箱') {
                                    this.tabelDataTB[0].iheavyTeu = el.samePeriod
                                    this.tabelDataTB[1].iheavyTeu = el.currentPeriod
                                    this.tabelDataTB[2].iheavyTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '空箱') {
                                    this.tabelDataTB[0].iemptyTeu = el.samePeriod
                                    this.tabelDataTB[1].iemptyTeu = el.currentPeriod
                                    this.tabelDataTB[2].iemptyTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '水转水') {
                                    this.tabelDataTB[0].iwaterTeu = el.samePeriod
                                    this.tabelDataTB[1].iwaterTeu = el.currentPeriod
                                    this.tabelDataTB[2].iwaterTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '非水转水') {
                                    this.tabelDataTB[0].inoWaterTeu = el.samePeriod
                                    this.tabelDataTB[1].inoWaterTeu = el.currentPeriod
                                    this.tabelDataTB[2].inoWaterTeu = this.toNumberR(el.sameRatio)
                                }
                            }
                            this.tabelDataTB.forEach(element => {
                                element.iTotal = element.iheavyTeu + element.iemptyTeu
                                element.iTotal = element.iTotal.toFixed(2)
                            });
                            this.tabelDataTB[2].iTotal = this.tabelDataTB[0].iTotal==0||this.tabelDataTB[0].iTotal=='-'?0:((this.tabelDataTB[1].iTotal - this.tabelDataTB[0].iTotal)/ this.tabelDataTB[0].iTotal) * 100
                            this.tabelDataTB[2].iTotal = this.tabelDataTB[2].iTotal.toFixed(2)
                            for (let el of res.data.Export) {
                                if (el.planType === '艘次') {
                                    this.tabelDataTB[0].ovoyage = el.samePeriod
                                    this.tabelDataTB[1].ovoyage = el.currentPeriod
                                    this.tabelDataTB[2].ovoyage = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '重箱') {
                                    this.tabelDataTB[0].oheavyTeu = el.samePeriod
                                    this.tabelDataTB[1].oheavyTeu = el.currentPeriod
                                    this.tabelDataTB[2].oheavyTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '空箱') {
                                    this.tabelDataTB[0].oemptyTeu = el.samePeriod
                                    this.tabelDataTB[1].oemptyTeu = el.currentPeriod
                                    this.tabelDataTB[2].oemptyTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '水转水') {
                                    this.tabelDataTB[0].owaterTeu = el.samePeriod
                                    this.tabelDataTB[1].owaterTeu = el.currentPeriod
                                    this.tabelDataTB[2].owaterTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '非水转水') {
                                    this.tabelDataTB[0].onoWaterTeu = el.samePeriod
                                    this.tabelDataTB[1].onoWaterTeu = el.currentPeriod
                                    this.tabelDataTB[2].onoWaterTeu = this.toNumberR(el.sameRatio)
                                }
                            }
                            this.tabelDataTB.forEach(element => {
                                element.oTotal = element.oemptyTeu + element.oheavyTeu
                                element.oTotal = element.oTotal.toFixed(2)
                            });
                            this.tabelDataTB[2].oTotal = this.tabelDataTB[0].oTotal==0||this.tabelDataTB[0].oTotal=='-'?0:((this.tabelDataTB[1].oTotal - this.tabelDataTB[0].oTotal)/ this.tabelDataTB[0].oTotal) * 100
                            this.tabelDataTB[2].oTotal = this.tabelDataTB[2].oTotal.toFixed(2)
                            getMonthTabRepSPTB(params).then(res => {
                                for (let el of res.data.aaData) {
                                    if (el.planType === '熏蒸') {
                                        this.tabelDataTB[0].xz = el.samePeriod
                                        this.tabelDataTB[1].xz = el.currentPeriod
                                        this.tabelDataTB[2].xz = this.toNumberR(el.sameRatio)
                                    } else {
                                        this.tabelDataTB[0].ez = el.samePeriod
                                        this.tabelDataTB[1].ez = el.currentPeriod
                                        this.tabelDataTB[2].ez = this.toNumberR(el.sameRatio)
                                    }
                                }
                                this.tabelDataTB.forEach(element => {
                                    element.xzTotal = element.xz + element.ez
                                    element.xzTotal = element.xzTotal.toFixed(2)
                                    element.totalV = element.ivoyage + element.ovoyage
                                    element.totalV = element.totalV.toFixed(2)
                                    element.totalH = element.iheavyTeu +
                                        element.oheavyTeu
                                    element.totalH = element.totalH.toFixed(2)
                                    element.totalH = Number(element.totalH)
                                    element.totalE = element.iemptyTeu +
                                        element.oemptyTeu
                                    element.totalE = element.totalE.toFixed(2)
                                    element.totalE = Number(element.totalE)
                                    element.totalAll = element.totalH + element
                                        .totalE
                                    element.totalAll = element.totalAll.toFixed(2)
                                });
                                this.tabelDataTB[2].xzTotal = this.tabelDataTB[0].xzTotal==0||this.tabelDataTB[0].xzTotal=='-'?0:((this.tabelDataTB[1].xzTotal - this.tabelDataTB[0].xzTotal)/ this.tabelDataTB[0].xzTotal) * 100
                                this.tabelDataTB[2].xzTotal = this.tabelDataTB[2].xzTotal.toFixed(2)
                                this.tabelDataTB[2].totalV = this.tabelDataTB[0].totalV==0||this.tabelDataTB[0].totalV=='-'?0:((this.tabelDataTB[1].totalV-this.tabelDataTB[0].totalV)/this.tabelDataTB[0].totalV)*100
                                this.tabelDataTB[2].totalH = this.tabelDataTB[0].totalH==0||this.tabelDataTB[0].totalH=='-'?0:((this.tabelDataTB[1].totalH-this.tabelDataTB[0].totalH)/this.tabelDataTB[0].totalH)*100
                                this.tabelDataTB[2].totalE = this.tabelDataTB[0].totalE==0||this.tabelDataTB[0].totalE=='-'?0:((this.tabelDataTB[1].totalE-this.tabelDataTB[0].totalE)/this.tabelDataTB[0].totalE)*100
                                this.tabelDataTB[2].totalAll = this.tabelDataTB[0].totalAll==0||this.tabelDataTB[0].totalAll=='-'?0:((this.tabelDataTB[1].totalAll-this.tabelDataTB[0].totalAll)/this.tabelDataTB[0].totalAll)*100
                                this.tabelDataTB[2].totalV = this.tabelDataTB[2].totalV.toFixed(2)
                                this.tabelDataTB[2].totalH = this.tabelDataTB[2].totalH.toFixed(2)
                                this.tabelDataTB[2].totalE = this.tabelDataTB[2].totalE.toFixed(2)
                                this.tabelDataTB[2].totalAll = this.tabelDataTB[2].totalAll.toFixed(2)
                                for (let item in this.tabelDataTB[2]) {
                                    if(this.tabelDataTB[2][item] === 0||this.tabelDataTB[2][item] === '0.00'){
                                        this.tabelDataTB[2][item] = '-'
                                    }
                                }
                                this.tabelDataTB.push({})
                                this.tabelDataTB.splice(3, 1)
                                this.$nextTick(() => {
                                    window.print()
                                    window.close()
                                })
                            })
                        })
                    })
                })
            },
        }
    }

</script>
<style lang="scss" scoped>
    .content {
        width: 100%;
    }

    .all-tab {
        border-collapse: collapse;
        width: 1070px;
        margin: 20px auto;
        margin-top: 0;

        tr {
            height: 40px;
            font-size: 14px;
        }
    }

    .all-tab tr td {
        border: 1px solid #dcdfe6;
        text-align: center;
    }

    .td-bg {
        background: #f1faff;
        font-weight: bold;
    }

    .td-bg2 {
        background: #fafafa;
    }

    .title-font {
        color: #409EFF;
        font-size: 13px;
    }

    .tb-ul {
        display: block;
        letter-spacing: -8px;
        width: 1070px;
        margin: 10px auto;
        margin-bottom: 0;

        li {
            display: inline-block;
            // width: 33.3%;
            letter-spacing: normal;

        }
    }

</style>
